[data-type="button"],
[data-type="submit"] {
  & .formkit-input {
    font-size: var(--fk-font-size-button);
    border-radius: var(--fk-border-radius);
    cursor: pointer;
    display: inline-flex;
    width: auto;
    justify-content: center;
    padding: var(--fk-padding-button);
    margin: var(--fk-margin-button);
    position: relative;
    transition: filter 0.25s;
    border: 1px solid transparent;
    line-height: var(--fk-line-height-button);

    &:focus-visible {
      outline: var(--fk-color-border-focus) solid 2px;
      outline-offset: 2px;
    }
  }

  &[data-disabled] .formkit-input,
  & .formkit-input[disabled] {
    background: var(--fk-color-border) !important;
    color: var(--fk-color-button) !important;
    cursor: not-allowed;
  }
}

[data-type="submit"] {
  & .formkit-input {
    background: var(--fk-bg-submit);
    color: var(--fk-color-submit);

    &::before {
      box-sizing: border-box;
      content: "";
      width: 0;
      margin-right: 0;
      height: 1.28571428em;
      border: 0 solid transparent;
      border-radius: 1.28571428em;
      transition: width 0.25s, border 0.25s, margin-right 0.25s;
    }

    &:hover {
      background: var(--fk-bg-submit-hover);
    }
  }
}

[data-loading] {
  & [data-type="submit"] .formkit-input {
    &::before {
      animation: fk-rotate 0.5s linear infinite;
      width: 1.28571428em;
      border: 0.1428571429em solid white;
      border-right-color: transparent;
      margin-right: 0.75em;
    }
  }

  & .formkit-actions [data-type="submit"] .formkit-input {
    filter: brightness(1.1);
    pointer-events: none;
  }
}

[data-type="button"] {
  & .formkit-input {
    background: var(--fk-bg-button);
    color: var(--fk-color-button);

    &:hover {
      background: var(--fk-bg-button-hover);
    }
  }
}
